<script setup lang="ts">
  import { ref, watch, defineEmits } from 'vue';
  import TopInput from './components/top-input.vue';
  import TopInfoTable from './components/top-infoTable.vue';
  import TopToolTable from './components/top-toolTable.vue';

  const emit = defineEmits(['updateTableData']);
  const tableData = ref([]);
  const tableToolData = ref([]);
  const tableChanged = ref<string>('tableData');
  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
      tableChanged.value = 'tableData';
    },
    { deep: true }
  );
  watch(
    tableToolData,
    () => {
      emit('updateTableData', tableToolData.value);
      tableChanged.value = 'tableToolData';
    },
    { deep: true }
  );
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">AO配套信息查询</div>
      </template>
      <div class="content">
        <TopInput
          @info-array="tableData = $event"
          @tool-array="tableToolData = $event"
        />
        <TopInfoTable
          v-if="tableChanged === 'tableData'"
          :table-data="tableData"
        />
        <TopToolTable
          v-if="tableChanged === 'tableToolData'"
          :table-data="tableToolData"
        />
      </div>
    </a-card>
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
